<template>
	<view class="flex-col section_7">
	  <view class="flex-row space-x-11">
	    <image
	      class="image_7"
	      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16647781261518494751.png"
	    />
	    <text class="font_5 text_18">应缴费用</text>
	  </view>
	  <view class="flex-col">
	    <template v-for="(item, i) in toPatentFee">
	      <view class="flex-col space-y-18 list-item">
	        <text class="font_6 text_19">{{item.payType}}</text>
	        <view class="flex-row group_5 view">
	          <text class="font_7">应缴费金额：</text>
	          <text class="font_8">{{item.payAmount}}</text>
	        </view>
	        <view class="flex-row group_6 view_2">
	          <text class="font_7">缴费截止日期：</text>
	          <text class="font_9 text_20">{{item.payDeadline}}</text>
	        </view>
	        <view class="flex-row group_7 view_3">
	          <text class="font_7">缴费状态：</text>
	          <text class="font_10 text_21 text_22">{{item.payFees}}</text>
	        </view>
	      </view>
	      <view class="list-divider"></view>
	    </template>
		<u-empty v-if="!toPatentFee.length" class="empty-data">
				</u-empty>
	  </view>
	  <view class="flex-row space-x-11 costed">
	    <image
	      class="image_7"
	      src="https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/632afc43e391320011695f3b/16647781261518494751.png"
	    />
	    <text class="font_5 text_18" style="color: #2caf2c;">已缴费用</text>
	  </view>
	  <view class="flex-col">
	    <template v-for="(item, i) in alreadyPatentFee">
	      <view class="flex-col space-y-18 list-item">
	        <text class="font_6 text_19">{{item.payType}}</text>
	        <view class="flex-row group_5 view">
	          <text class="font_7">应缴费金额：</text>
	          <text class="font_8">{{item.payAmount}}</text>
	        </view>
	        <view class="flex-row group_6 view_2">
	          <text class="font_7">缴费截止日期：</text>
	          <text class="font_9 text_20">{{item.payDate}}</text>
	        </view>
			<view class="flex-row group_6 view_2">
			  <text class="font_7">缴费人姓名：</text>
			  <text class="font_9 text_20">{{item.feePeople}}</text>
			</view>
			<view class="flex-row group_6 view_2">
			  <text class="font_7">票据代码：</text>
			  <text class="font_9 text_20">{{item.bill}}</text>
			</view>
	        <view class="flex-row group_7 view_3">
	          <text class="font_7">票据号码：</text>
	          <text class="font_10 text_21 text_22">{{item.receiptno}}</text>
	        </view>
	      </view>
	      <view class="list-divider"></view>
	    </template>
		<u-empty v-if="!alreadyPatentFee.length" class="empty-data">
				</u-empty>
	  </view>
	</view>
</template>

<script>
	export default {
		props:['alreadyPatentFee','toPatentFee'],
		data() {
			return {
				costs:[1,2,3,4],
				uncost:[1,2,3]
			};
		},
		onLoad(option) {
			
		},
		methods:{
			
		}
	}
</script>

<style lang="scss" scoped>
.costed {
	margin-top: 50rpx;
}
.section_7 {
  padding: 18rpx 31rpx 94rpx;
  background-color: #ffffff;
  .space-x-11 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-left: 11rpx;
    }
    .image_7 {
      margin: 6rpx 0;
      width: 15rpx;
      height: 18rpx;
    }
    .font_5 {
      font-size: 30rpx;
      font-family: Microsoft YaHei;
      line-height: 28rpx;
      color: #666666;
    }
    .text_18 {
      color: #f43838;
      line-height: 30rpx;
    }
  }
  .space-y-18 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 18rpx;
    }
    .font_6 {
      font-size: 28rpx;
      font-family: Microsoft YaHei;
      line-height: 28rpx;
      color: #333333;
    }
    .text_19 {
      align-self: flex-start;
    }
    .group_5 {
      margin-left: 25rpx;
      margin-top: 29rpx;
      align-self: flex-start;
      .font_8 {
        font-size: 28rpx;
        font-family: Microsoft YaHei;
        line-height: 26rpx;
        color: #444444;
      }
    }
    .view {
      margin-left: initial;
      margin-top: initial;
      align-self: initial;
    }
    .group_6 {
      margin-top: 17rpx;
      padding: 0 25rpx;
      .font_9 {
        font-size: 28rpx;
        font-family: Microsoft YaHei;
        line-height: 23rpx;
        color: #444444;
      }
      .text_20 {
        margin-bottom: 3rpx;
      }
    }
    .view_2 {
      margin-top: initial;
      padding: initial;
    }
    .font_7 {
      font-size: 28rpx;
      font-family: Microsoft YaHei;
      line-height: 28rpx;
      color: #777777;
    }
    .group_7 {
      margin-top: 18rpx;
      padding: 0 26rpx;
      .font_10 {
        font-size: 28rpx;
        font-family: Microsoft YaHei;
        line-height: 28rpx;
        color: #444444;
      }
      .text_21 {
        margin-bottom: 3rpx;
      }
      .text_22 {
        margin-bottom: initial;
      }
    }
    .view_3 {
      margin-top: initial;
      padding: initial;
    }
  }
  .list-item {
    padding: 29rpx 25rpx 25rpx;
  }
  .list-divider {
    margin: 0 25rpx;
    height: 1rpx;
    border: dashed 1rpx #bbbbbb;
  }
}

.empty-data {
	position: fixed;
	width: 100%;
	top: 60%;
	right: 0%;
}
</style>